﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        div.example1 ul {
            list-style-type: none;
        }

            div.example1 ul li a {
                padding-left: 20px;
                background-image: url(demo-images/file.png);
                background-repeat: no-repeat;
            }

        div.examples1 ul li a[href^="https://"] {
            background-image: url(demo-images/lock.png);
        }

        div.example1 a[href^="mailto:"] {
            background-image: url(demo-images/mail.png);
        }

        div.example1 a[href^="ftp://"] {
            background-image: url(demo-images/folder_ftp.png);
        }

        div.example1 a[href^="magnet"] {
            background-image: url(demo-images/magnet.png);
        }

        div.example2 ul {
            list-style-type: none;
        }

            div.example2 ul li a {
                padding-left: 20px;
                background-image: url(demo-images/file.png);
                background-repeat: no-repeat;
            }

                div.example2 ul li a[href$=".pdf"] {
                    background-image: url(demo-images/pdf.png);
                }

                div.example2 ul li a[href$=".docx"] {
                    background-image: url(demo-images/docx.png);
                }

                div.example2 ul li a[href$=".xlsx"] {
                    background-image: url(demo-images/xlsx.png);
                }

                div.example2 ul li a[href$=".mp3"] {
                    background-image: url(demo-images/audio.png);
                }

        div.example3 ul {
            list-style-type: none;
        }

            div.example3 ul li a {
                padding-left: 20px;
                background-image: url(demo-images/file.png);
                background-repeat: no-repeat;
            }

                div.example3 ul li a[href*="google.com"] {
                    background-image: url(demo-images/google.png);
                }

                div.example3 ul li a[href*="twitter.com"] {
                    background-image: url(demo-images/twitter.png);
                }

                div.example3 ul li a[href*="facebook.com"] {
                    background-image: url(demo-images/facebook.png);
                }

                div.example3 ul li a[href*="yahoo.com"] {
                    background-image: url(demo-images/yahoo.png);
                }

        div.example4 .exciting-text::after {
            content: "<- now this *is* exciting!";
            color: green;
        }

        div.example4 .boring-text::after {
            content: "<- BORING!";
            color: red;
        }

        div.example5 q::before {
            content: "«";
            color: blue;
        }

        div.example5 q::after {
            content: "»";
            color: red;
        }

        /* draw any selected text yellow on red background */
        ::-moz-selection {
            color: gold;
            background: red;
        }

        ::selection {
            color: gold;
            background: red;
        }

        /* draw selected text in a paragraph white on black */
        p::-moz-selection {
            color: white;
            background: black;
        }

        p::selection {
            color: white;
            background: black;
        }

        /* make the first letter of every paragraph red and big */

        p::first-letter { /* Use :first-letter if support for IE 8 or earlier is needed */
            color: red;
            font-size: 130%;
        }

        p::first-line {
            font-style:oblique;
        }
    </style>
</head>
<body>
    <div class="example1">
        <ul>
            <li><a href="http://www.google.com">Visit a website</a></li>
            <li><a href="https://www.google.com">Visit a secure website</a></li>
            <li><a href="mailto:email@email.com">Send an email</a></li>
            <li><a href="ftp://www.google.com">Connect to an FTP server</a></li>
            <li><a href="magnet:…">Download from a magnet link</a></li>
        </ul>
    </div>

    <div class="example2">
        <ul>
            <li><a href="http://www.css3.info/demos/files/1.pdf">A link to a PDF document</a></li>
            <li><a href="http://www.css3.info/demos/files/1.docx">A link to a Word document</a></li>
            <li><a href="http://www.css3.info/demos/files/1.xlsx">A link to an Excel document</a></li>
            <li><a href="http://www.css3.info/demos/files/1.mp3">A link to an MP3 file</a></li>
            <li><a href="http://www.css3.info">A normal web link</a></li>
        </ul>
    </div>

    <div class="example3">
        <ul>
            <li><a href="http://www.google.com">A link to Google</a></li>
            <li><a href="http://www.twitter.com/css3">A link to a Twitter profile</a></li>
            <li><a href="https://www.facebook.com/css3.info">A link to a Facebook page</a></li>
            <li><a href="http://www.yahoo.com">A link to Yahoo</a></li>
            <li><a href="http://www.bing.com">Any other link</a></li>
        </ul>
    </div>

    <div class="example4">
        <p class="boring-text">Here is some good old boring text.</p>
        <p>Here is some moderate text that is neither boring nor exciting.</p>
        <p class="exciting-text">
            Contributing to MDN is easy and fun.<br/>
            Just hit the edit button to add new live samples, or improve existing samples.
        </p>
    </div>

    <div class="example5">
        <q>Some quotes</q>, he said, <q>are better than none</q>.
    </div>

</body>
</html>
